import { Badge, Button, Checkbox, Popover, Space, Tooltip, Typography } from 'antd'
import cs from 'classnames'
import dayjs from 'dayjs'

import { Violation } from '@/api/interface'
import Group9 from '@/assets/svg/Group9.svg'
import Message from '@/assets/svg/message.svg'
import Message1 from '@/assets/svg/message-1.svg'
import NoteTextOutLine from '@/assets/svg/note-text-outline.svg'
import styles from '@/pages/home/style/index.module.less'

const tableColumnsFilter = (
  t: any,
  tableColumns: any[],
  options: any[],
  onChange: (_: any) => void,
  resetTableColumns: () => void
) => (
  <>
    <Checkbox.Group
      style={{ display: 'flex', flexDirection: 'column' }}
      onChange={onChange}
      value={tableColumns}
      className={styles['filter-item']}
    >
      {options.map((a) => (
        <div className={cs('w-full h-9 flex items-center pl-4 pr-3')} key={a.value}>
          <Checkbox value={a.value} disabled={a.disabled}>
            {a.label}
          </Checkbox>
        </div>
      ))}
    </Checkbox.Group>
    <div className={cs('p-2 w-full flex', styles['filter-bottom'])}>
      <Button className={styles['reset']} onClick={resetTableColumns}>
        {t['form.reset']}
      </Button>
    </div>
  </>
)

export function getColumns(
  t: any,
  // eslint-disable-next-line no-unused-vars
  callback: (record: Partial<Violation>, type: string) => Promise<void>,
  tableColumns: Array<unknown>,
  options: Array<any>,
  lang: string,
  onChange: (_: any) => void,
  resetTableColumns: () => void
) {
  const defaultColumns = options.filter((a) => tableColumns.includes(a.value))

  const customColumns: any[] = [
    {
      title: t['columns.created'],
      dataIndex: 'createdAt',
      minWidth: 200,
      render: (x: any) => <div className="ltr-ipt inline-block">{x ? x : '--'}</div>,
      sorter: (a: { createdAt: any }, b: { createdAt: any }) => {
        return dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf()
      },
    },
    {
      title: t['columns.typeA'],
      dataIndex: 'violationTypeA',
      ellipsis: true,
      render: (a: any): JSX.Element => {
        const text = a && a.map((b: any) => b?.value[lang === 'en-US' ? 'en' : 'ar']).join(', ')
        return (
          <Typography.Text
            ellipsis={{
              tooltip: text && (
                <div style={{ maxHeight: '50vh', overflow: 'auto', lineHeight: 1.5 }}>{text}</div>
              ),
            }}
          >
            {text || '--'}
          </Typography.Text>
        )
      },
    },
    {
      title: t['columns.typeB'],
      dataIndex: 'violationTypeB',
      ellipsis: true,
      render: (a: any): JSX.Element => {
        const text = a && a.map((b: any) => b?.value[lang === 'en-US' ? 'en' : 'ar']).join(', ')
        return (
          <Typography.Text
            ellipsis={{
              tooltip: text && (
                <div style={{ maxHeight: '50vh', overflow: 'auto', lineHeight: 1.5 }}>{text}</div>
              ),
            }}
          >
            {text || '--'}
          </Typography.Text>
        )
      },
    },
    {
      title: t['columns.desc'],
      dataIndex: 'violationDesc',
      ellipsis: true,
      render: (a: any): JSX.Element => {
        return (
          <Typography.Text
            ellipsis={{
              tooltip: a && (
                <div style={{ maxHeight: '50vh', overflow: 'auto', lineHeight: 1.5 }}>{a}</div>
              ),
            }}
          >
            {a || '--'}
          </Typography.Text>
        )
      },
    },
    {
      title: t['columns.AdditionalDetails'],
      dataIndex: 'violationAdditionalDetails',
      ellipsis: true,
      render: (a: any): JSX.Element => {
        return (
          <Typography.Text
            ellipsis={{
              tooltip: a && (
                <div style={{ maxHeight: '50vh', overflow: 'auto', lineHeight: 1.5 }}>{a}</div>
              ),
            }}
          >
            {a || '--'}
          </Typography.Text>
        )
      },
    },
    {
      title: (
        <div className=" flex items-center justify-between">
          {t['columns.actions']}
          <div className={cs('', lang === 'en-US' ? 'right-0' : 'left-0')}>
            <Popover
              placement="bottom"
              arrow={false}
              content={tableColumnsFilter(t, tableColumns, options, onChange, resetTableColumns)}
              trigger="hover"
            >
              <div className={cs(styles['filter'])}>
                <Group9 className={cs(' w-6 h-6', styles['icon'])} />
              </div>
            </Popover>
          </div>
        </div>
      ),
      dataIndex: 'actions',
      render: (_: any, b: any): JSX.Element => {
        const unRepliedCount = b.unRepliedCount * 1
        // const repliedCount = b.repliedCount * 1
        return (
          <Space size={[16, 0]} className="text-[0] pt-2">
            {unRepliedCount > 0 ? (
              <Tooltip title={t['columns.actions.Reply']}>
                <div className={cs('flex items-center')} onClick={() => callback(b, 'reply')}>
                  <Message1 className={cs('w-[20px] h-[20px] cursor-pointer')} />
                  <div className={cs('w-6 flex')}>
                    <div className={cs(' px-1 scale-75 Roboto')}>
                      <Badge count={unRepliedCount} />
                    </div>
                  </div>
                </div>
              </Tooltip>
            ) : (
              <div className={cs('flex items-center')} onClick={() => callback(b, 'reply')}>
                <Tooltip title={t['columns.actions.Feedback']}>
                  <Message className={cs('w-[20px] h-[20px] cursor-pointer')} />
                </Tooltip>
                <div className={cs('w-6 text-[#16202D] text-[12px] font-semibold')}></div>
              </div>
            )}
            <Tooltip title={t['columns.actions.Details']}>
              <NoteTextOutLine
                className={cs('w-[20px] h-[20px] cursor-pointer')}
                onClick={() => callback(b, 'view')}
              />
            </Tooltip>
          </Space>
        )
      },
    },
  ]

  const columns = defaultColumns.map((a) => {
    const k = customColumns.findIndex((b) => b.dataIndex === a.value)
    return k === -1
      ? {
          ...{
            title: a.label,
            dataIndex: a.value,
          },
          ...(a.width ? { width: a.width } : {}),
        }
      : customColumns[k]
  })

  return columns
}
